<template>
<!-- 社区列表 -->
  <div class="comList">
    <!-- 顶部导航栏 --> 
    <van-nav-bar  :title="commName"  right-text="社区选择"  left-arrow @click-left="onClickLeft" @click-right="onClickRight"/>
    <!-- 社区列表 -->
    <div class="community-list">
      <ul class="list-box ">
        <!-- 1社区简介 -->
        <li class="content-list fl" @click="Introduction"  >
          <div class="list-imgLeft">
            <img src="../../../../assets/img/shequjianjie.png" alt="">
          </div>
          <div class="list-right">
            <div class="name">社区简介</div>
            <div class="Introd">输入小区搜索社区</div>
          </div>
        </li>
        <!--2 团队展示 -->
        <li class="content-list fl"   @click="team">
          <div class="list-imgLeft">
            <img src="../../../../assets/img/tuandui.png" alt="">
          </div>
          <div class="list-right">
            <div class="name">团队展示</div>
            <div class="Introd">输入小区搜索社区</div>
          </div>
        </li>
        <!-- 3办事指南 -->
        <li class="content-list fl"  @click="guide">
          <div class="list-imgLeft">
            <img src="../../../../assets/img/banshizhinan.png" alt="">
          </div>
          <div class="list-right">
            <div class="name">办事指南</div>
            <div class="Introd">查看办事流程</div>
          </div>
        </li>
        <!-- 4社区动态 -->
        <li class="content-list fl" @click="dynamic">
          <div class="list-imgLeft">
            <img src="../../../../assets/img/shequ-active.png" alt="">
          </div>
          <div class="list-right">
            <div class="name">社区动态</div>
            <div class="Introd">社区实时新闻</div>
          </div>
        </li>
        <!-- 5党建工作 -->
        <li class="content-list fl" @click="party">
          <div class="list-imgLeft">
            <img src="../../../../assets/img/dangjiangongzuo.png" alt="">
          </div>
          <div class="list-right">
            <div class="name">党建工作</div>
            <div class="Introd">党关系转接</div>
          </div>
        </li>
        <!-- 6社区综合文化服务中心 -->
        <li class="content-list fl" @click="service">
          <div class="list-imgLeft">
            <img src="../../../../assets/img/shequzong.png" alt="">
          </div>
          <div class="list-right">
            <div class="name">社区综合文化服务中心</div>
            <!-- <div class="Introd"></div> -->
          </div>
        </li>
        <!-- 7老年大学 -->
        <li class="content-list fl" @click="oldAge">
          <div class="list-imgLeft">
            <img src="../../../../assets/img/laoniandaxue.png" alt="">
          </div>
          <div class="list-right">
            <div class="name">老年大学</div>
            <div class="Introd">老年人学习区</div>
          </div>
        </li>
        <!-- 8志愿者招募 -->
        <li class="content-list fl" @click="recruiting">
          <div class="list-imgLeft">
            <img src="../../../../assets/img/zhiyuanzhe.png" alt="">
          </div>
          <div class="list-right">
            <div class="name">志愿者招募</div>
            <div class="Introd">加入志愿者</div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    data(){
      return{
        id:this.$route.query.id ? this.$route.query.id : '',  // 判断页面是否存在id
        commName:this.$route.query.name ? this.$route.query.name : '',
        userId:sessionStorage.getItem('userId'),
      }
    },
    methods:{
      onClickLeft() {  // 点击返回按钮
        if(localStorage.getItem('commId')){
          this.$router.push({
            name:'index'
          })
        }else{
          this.$router.push({name:"Community"});
        }
      },
      onClickRight() {
         this.$router.push( {path: "../../../community/Overview",query:{source:'comList'}})
      },
      // 社区简介
      Introduction(){
        this.$router.push( {path: "../Introduction",query:{id:this.id,name:this.commName}})
      },
      //团队展示
      team(){
        this.$router.push( {path: "./team",query:{id:this.id}})
      },
      // 办事指南
      guide(){
        this.$router.push( {path: "./Guide",query:{id:this.id}})
      },
      // 社区动态
      dynamic(){
        this.$router.push( {path: "./dynamic",query:{id:this.id}})
      },
      // 党建工作
      party(){
        this.$router.push( {path: "./party",query:{id:this.id}})
      },
      // 文化服务中心
      service(){
        this.$router.push( {path: "./service",query:{id:this.id}})
      },
      // 老年大学
      oldAge(){
        this.$router.push( {path: "./oldAge",query:{id:this.id}})
      },
      // 志愿者招募
      recruiting(){
        this.$router.push( {path: "./recruiting",query:{id:this.id}})
      },
      
    },
     mounted(){},
   
  } 
</script>
<style scoped>
  .van-nav-bar__right span{
    color: #D33043!important;
  }
  .community-list{
    width: 95%;
    margin: 0 auto;
    
  }
  .community-list::after {
    overflow: hidden;
    content: "";
    display: block;
    height: 0;
    clear: both;
  }

  .list-box .content-list {
    margin-left: 0.4rem;
    width: 46%;
    /* display: -webkit-box;
    display: -ms-flexbox;
    display: flex; */
    text-align: center;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    border: 1px solid rgba(211,48,67,0.8);
    box-shadow: 0 0 0.25rem 0 rgb(211,48,67,0.5);
    border-radius:4px;
    background:rgba(255,255,255,1);
    
  }
  .list-imgLeft{
        float: left;
    width: 1.5rem;
    height:  1.5rem;
    line-height: 1.5rem;
  }
  .list-right{
    margin-left: 2rem;
        text-align: left;
  }
  .content-list{
    margin: 0 auto;
    margin: 0.5rem 0 0.3rem 0;
    background-color: #FFFFFF;
    padding: 1.2rem 0.5rem;
  }
  .community-list ul li::after {
    overflow: hidden;
    content: "";
    display: block;
    height: 0;
    clear: both;
  }
  .name{
        margin-bottom: 0.5rem;
    font-size: 0.7rem;
    font-weight: bold;
    text-align: left;
  }   
  .Introd{
    font-size: 0.6rem;
    /* height: 0.6rem; */
    line-height: 0.7rem;
    color:#999999;
    overflow:hidden;
    -webkit-line-clamp:1;
    display:-webkit-box;
    -webkit-box-orient:vertical;

  }
  .van-cell__right-icon{
    font-size: 20px;
    color: #000000;
  }
</style>